const tree = {
  name: 'root',
  task: () => {
    console.log('root')
  },
  children: [
    {
      name: '一级子树 01',
      task: () => {
        console.log('一级子树 01')
      },
      children: [
        {
          name: '二级子树 01_01',
          task: () => {
            console.log('二级子树 01_01')
          },
          children: [],
        },
        {
          name: '二级子树 01_02',
          task: () => {
            console.log('二级子树 01_02')
          },
          children: [],
        },
      ],
    },
    {
      name: '一级子树 02',
      task: () => {
        console.log('一级子树 02')
      },
      children: [],
    },
  ],
}
let nextFiber = tree
const runFiber = (fiber) => {
  fiber.task()
  let preChild = null
  fiber.children.forEach((child, index) => {
    child.parent = fiber
    if (index === 0) {
      fiber.nextFiber = child
    } else {
      preChild.sibling = child
    }
    preChild = child
  })
  if (fiber.nextFiber) {
    return fiber.nextFiber
  }
  if (fiber.sibling) {
    return fiber.sibling
  }
  return fiber.parent.sibling ? fiber.parent.sibling : ''
}
const callBack = (IdleDeadline) => {
  while (IdleDeadline.timeRemaining() > 1 && nextFiber) {
    nextFiber = runFiber(nextFiber)
  }
  nextFiber && requestIdleCallback(callBack)
}
requestIdleCallback(callBack)

// fiber架构执行流程
//  1.先执行自己
//  2.执行child[0]
//  3.执行完毕child的兄弟节点，
//  4.child兄弟节点执行完毕之后执行叔叔节点
//  执行顺序： root => 01 => 01_01 => 01_02 => 02

// 1.创建nextFiber 指向root节点
// 2.执行root节点的task,创建preChild指向null
// 3.遍历root节点的children
//  1.拿到第一个child
//    1.将第一个child的parent指向root
//    2.将root的nextFiber指向第一个child
//    3.将preChild指向第一个child
//  2.拿到第二个child
//    1.通过preChild将第一个child的sibling指向第二个child
//  3....
// 4.返回nextFiber，返回child，或者返回sibling(child的兄弟节点)，或者返回叔叔节点,
// 5.继续执行以上流程
